<template>
  <div class='container'>
     <el-dialog  :title="`${title}目录`" :visible="showDialog"  @close="btnCancel" >
         <el-form  label-width="120px"  :model="data1"   :rules="rules"  ref="perForm">
      <el-form-item  label="所属学科">
         <el-select placeholder="请选择活动区域" v-model="data1.subjectID">
      <el-option v-for="(item,index) in jianlist" :label="item.label" :value="item.value" :key="index" />
      </el-select>
      </el-form-item>
      <el-form-item label="目录名称" prop="tagName" >
       <el-input style="width:50%"  v-model="data1.tagName" placeholder="请输入目录名称"/>
      </el-form-item>
         </el-form>
         <template v-slot:footer>
      <el-row type="flex" justify="center">
        <el-col :span="6">
          <el-button size="small" @click="btnCancel">取消</el-button>
          <el-button type="primary" size="small" @click="isok">确定</el-button>
        </el-col>
      </el-row>
    </template>
      </el-dialog>
  </div>
</template>

<script>
import { add, update } from '@/api/hmmm/tags'
import { simple } from '@/api/hmmm/subjects'
export default {

  props: {
    showDialog: {
      type: Boolean,
      default: false
    },
    data1: {
      type: Object,
      required: true
    }
  },
  computed: {
    title () {
      return this.data1.id ? '修改' : '新增'
    }
  },
  data () {
    return {
      jianlist: [],
      rules: {
        tagName: [{ required: true, message: '请输入目录名称', trigger: 'blur' }],
        subjectName: [{ required: true, message: '所选目录学科不能为空', trigger: 'blur' }]
      }
    }
  },
  methods: {
    // 取消
    btnCancel () {
      this.$refs.perForm.resetFields()
      this.$emit('update:showDialog', false)
      this.data1.subjectID = ''
    },
    // 确定按钮
    async  isok () {
      if (this.data1.id) {
        await update(this.data1)
      } else {
        await add(this.data1)
      }
      this.$parent.list()
      this.$message.success('操作成功')
      this.$emit('update:showDialog', false)
      this.$refs.perForm.resetFields()
      this.data1.subjectID = ''
    },
    async jiandanlei () {
      const res = await simple()
      this.jianlist = res.data
    }
  },
  created () {
    this.jiandanlei()
  }
}
</script>

<style scoped lang='less'></style>
